$(function () {
  let $main = $('.main');
  let main_container = ''
  let arr = [];
  let itemsArr = [];
  let $container;
  let containerStr = ''
    $.ajax({
    type : 'GET',
    url: "http://chst.vip:1234/api/getcategorytitle",
    async : false,
    context : document.body,
    dataType: 'json',
    success:function(data){
      data.result.forEach(element => {
        arr.push(element.titleId);
        main_container += `
        <li>
          <span>${element.title}</span>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sanjiao1"></use>
          </svg>
          <div class="container clear">
          </div>
        </li>
        `
      });
      $main.append(main_container);
      $container = $('.container');
    },
    error:function(error){
      console.log(error);
    }
  })
  console.log(arr);
  arr.forEach(id => {
    let items = $.ajax({
      type : 'GET',
      url : 'http://chst.vip:1234/api/getcategory?titleid=' + id,
      async : false,
      context : document.body,
      dataType: 'json',
      success : function(data){
        data.result.forEach(element => {
          containerStr +=`<a href="" class="clear" name="${element.category}" id="${element.categoryId}">
            <em>${element.category}</em>
          </a>`          
        });
        itemsArr.push(containerStr);
        containerStr = ""
      }
    })
  });

  $container.each((index,element)=>{
        $(element).append(itemsArr[index]);
  })

  $main.on('click','li',function(e){
    $(this).find('.container').stop().slideToggle(300)
    e.stopPropagation();
  })

  $container.on('click','a',function(e){
    e.preventDefault()
    let categoryid = $(this).attr('id');
    let category = $(this).attr('name');
    window.location.href = "./priceparity.html" + '?title=' + category + '&categoryid='+ categoryid;
  })
})
  